<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="x-admin/css/font.css">
    <link rel="stylesheet" href="x-admin/css/xadmin.css">
    <script type="text/javascript" src="x-admin/js/jquery.min.js"></script>
    <script src="x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="x-admin/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-table-cell {
            height: 50px !important;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">用车申请</a>
            <a href="">申请信息</a>
            <a>
              <cite>审核列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <select name="driver_id" id="driver_id">
                                <option value="">[选择司机]</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="car_id" id="car_id">
                                <option value="">[选择车牌]</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="apply_id" id="apply_id">
                                <option value="">[选择申请人]</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                        class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table id="dataList" lay-filter="dataList"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="optTemp">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="exam">审核</button>
</script>
<script>
    var table;
    layui.use(['table', 'form'], function () {
        table = layui.table;
        const form = layui.form;
        $.ajax({
            url: "car/select",
            method: "get",
            success(res) {
                if (res.code === 200) {
                    let $html = "";
                    for (const car of res.data) {
                        $html += '<option value="' + car.id + '">' + car.car_no + '</option>';
                    }
                    $("#car_id option:first").after($html);
                    form.render()
                }
            }
        })

        $.ajax({
            url: "userinfo/driver/select",
            method: "get",
            success(res) {
                if (res.code === 200) {
                    let $html = "";
                    for (const user of res.data) {
                        $html += '<option value="' + user.id + '">' + user.nickname + '</option>';
                    }
                    $("#driver_id option:first").after($html);
                    form.render()
                }
            }
        })

        $.ajax({
            url: "userinfo/apply/select",
            method: "get",
            success(res) {
                if (res.code === 200) {
                    let $html = "";
                    for (const user of res.data) {
                        $html += '<option value="' + user.id + '">' + user.nickname + '</option>';
                    }
                    $("#apply_id option:first").after($html);
                    form.render()
                }
            }
        })

        table.render({
            elem: "#dataList",
            url: "apply/page",
            where: {
                exam_status: "<%= loginInfo.power %>" == 2 ? 10 : 20
            },
            cols: [[
                {title: "编号", field: "id", width: "80"},
                {title: "申请人", field: "apply_name", width: "120"},
                {title: "使用车辆", field: "car_no", width: "120"},
                {
                    title: "司机", field: "is_driver", templet: function (d) {
                        if (d.is_driver === 1) {
                            return d.apply_name + "(自驾)";
                        } else {
                            return d.driver_name;
                        }
                    }, width: "120"
                },
                {
                    title: "用车时间", templet(d) {
                        return d.start_time + " - " + d.end_time
                    }, width: "320"
                },
                {title: "事由", field: "apply_content", width: "240"},
                {title: "操作", fixed: "right", templet: "#optTemp", width: "120"}
            ]],
            toolbar: true,
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100]
        });
        table.on("tool(dataList)", function (obj) {
            const {data: {id}, event} = obj;
            xadmin.open('审核申请', 'apply/edit?type=' + event + '&id=' + id);
        });
        form.on("submit(search)", function (data) {
            table.reload("dataList", {
                where: data.field,
                page: {
                    curr: 1
                }
            })
            return false;
        });
    });
</script>
</html>
